<template>
  <div class="channel-edit">
    <van-cell>
      <template #title> <span class="title-text">我的频道</span> </template>
      <van-button type="danger"  @click="isEdit=!isEdit" round size="mini" plain class="edit-btn"
        >{{isEdit?'完成':'编辑'}}</van-button
      >
    </van-cell>
    <van-grid :gutter="10" direction="horizontal"   class="tuijian"  >
      <van-grid-item
        class="grid-item"
        v-for="(channel,index) in myChannels"
        :key="channel.id"
        @click="onMyChannelClick(channel,index)"
  >
  <template #default>
    <van-icon name="clear" v-show="isEdit && !fixChannels.includes(channel.id)  "></van-icon>
      <span class="text" :style="{color:index==active?'red':''}">{{  channel.name}}</span>

  </template>
    </van-grid-item>
    </van-grid>

    <van-cell>
      <template #title> <span class="title-text">频道推荐</span> </template>
    </van-cell>
    <van-grid :gutter="10"  direction="horizontal"   icon-size="16px">
      <van-grid-item
        class="grid-item"
        v-for="channel in recommendChannels"
        :key="channel.id"
        icon="plus"
    @click="onAddChannel(channel)"
        :text="channel.name"
      />
    </van-grid>
  </div>
</template>
<script setup>

import {defineProps,ref,onMounted,computed} from "vue"
import {getAllChannels,addUserChannel,deleteUserChannel} from '../api/channel'
import {useStore} from "vuex"
import {setItem} from "../utils/storage"
let props=defineProps({
    myChannels:{
        type:Array
    },
    active:{
        type:Number
    }

})
let allChannels=ref([])
let isEdit=ref(false)
let fixChannels=ref([1]) //不允许删除的频道编号

//使用自定义事件（子传父）
const emits =defineEmits(["update-active"])
async function loadAllChannels(){
 let {data}=  await  getAllChannels()
 console.log(data);
 allChannels.value=data
}

const recommendChannels=computed(()=>{
    let channels=[];
    allChannels.value.forEach((channel)=>{
      const result =props.myChannels.find((myChannel)=>{
        return myChannel.id===channel.id
      })
      if(!result){
        channels.push(channel)
      }
    })
    return channels;
})
 const store=useStore()
//添加频道
async function onAddChannel(channel){
 

props.myChannels.push(channel)
//数据持久化处理
if(store.state.user){
    //已经登录
    const channelConten={
      userId:store.state.user.data.id,
      channel
    }
await addUserChannel(channelConten)
  

}else{
  //未登录,把数据存储到本地
  setItem("TOUTIAO_CHANNELS",props.myChannels)


}

}

//加入到我的频道
async function onMyChannelClick(channel,index){
if(isEdit.value){
  console.log(index);
  if(fixChannels.value.includes(channel.id)){return}
  //删除操作
  if(index<=props.active){
  emits("update-active",props.active-1,true)

  }
    props.myChannels.splice(index,1)
    if(store.state.user){
    //已经登录
  await  deleteUserChannel(channel.id,store.state.user.data.id)


}else{
  //未登录,把数据存储到本地
  setItem("TOUTIAO_CHANNELS",props.myChannels)


}


}else{
//非编辑状态，执行频道切换
  emits("update-active",index,false)
}
}

onMounted(() => {
    loadAllChannels()
})

</script>
<style>
.channel-edit {
  padding: 85px 0;
}
.title-text {
  font-size: 20px;
  color: #333;
}

.edit-btn {
  width: 85px;
  height: 38px;
  font-size: 16px;
}
.grid-item {
  width: 86px;
  height: 66px;
  background-color: #f4f5f6;

}
.van-grid-item__text {
  font-size: 16px;
  color: #222;
}

.van-icon-clear{
    position: absolute;
    right: -5px;
    top: -5px;
    font-size: 17px;
    color: #cacaca;
}

.text{
    font-size: 14px;
    color:#222
}

</style>
